<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudentProfiles - Group4 UniHub</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
    <link rel="stylesheet" href="../styles/profile.css">
    <link rel="stylesheet" href="../styles/student.css">
</head>
<body>
    <div id="header">
        <app-header 
            page-title="Student Profiles"
            header-image="../assets/images/header_partners.png">
        </app-header>
    </div>
    
    <div class="main-container">
        <div id="sidebar"></div>
        
        <div class="content">
            <div class="search-container" id="searchContainer">
                <input type="text" id="searchInput" placeholder="Please enter a course to match students">
                <button id="searchButton">Search</button>
            </div>
            <div class="profiles-container" id="profileContainer">
                <table id="studentTable">
                    <thead>
                        <tr>
                            <!-- <th>ID</th> -->
                            <th>Photo</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Interests</th>
                            <th>Courses</th>
                            <th>Achievements</th>
                            <th>Bio</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be inserted here by JavaScript -->
                    </tbody>
                </table>
            </div>
            <!-- Update Profile -->
            <form id="updateProfileForm" class="hidden">
                <h4>Update My profile</h4>
                <input type="hidden" id="update-id" name="id" required>
                <label>Photo:</label>
                <input type="file" id="update-photo" accept="image/*">
                <label>Interests:</label>
                <input type="text" id="update-interests" name="interests" required>
                <label>Courses:</label>
                <input type="text" id="update-courses" name="courses" required>
                <label>Achievements:</label>
                <input type="text" id="update-achievements" name="achievements" required>
                <label>Bio:</label>
                <textarea id="update-bio" name="bio" placeholder="Please enter your bio.No more than 40 words." required maxlength="40"></textarea>
                <button type="submit">Update my profile</button>
            </form>
        </div>
    </div>

    <div id="footer"></div>

    <script src="../components/header.js"></script>
    <script type="module" src="../components/sidebar.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/student-profiles.js"></script>
</body>
</html> 